<template>
	<div>
		
		<wxc-popup popup-color="#fff"
			:show="isBottomShow"
			@wxcPopupOverlayClicked="popupMenu"
			pos="bottom"
			:height="popupHeight">
			<div class="title">
				<!-- <div class="btn" @click="popupMenu">
					<text style="color: #9c9c9c;">取消</text>
				</div> -->
				<div class="btn" @click="popupMenu">
					<text style="color: #9c9c9c;">完成</text>
				</div>
			</div>
			<div class="header">
				<div style="flex-direction:row;position:relative;" :style="inputstyle">
					<text class="placeholder" v-if="blank">{{placeholder}}</text>
					<text v-if="type" :style="textstyle">{{passwordInput}}</text>
				</div>
			</div>
		
			<div class="content">
				<div class="row" v-for="(item,index) in numList" :key="index+1/6" v-if="state == 'num'">
					<div class="button" v-for="(ite,index) in item" :key="index+1/7" v-bind:style="{flex:ite==='blank'?6:1}" @click="btnClick(ite)">
						<text v-if="ite === 'blank'" style="fontFamily:iconfont;color:red;">&#xe66e;</text>
						<text v-else-if="ite === 'del'" style="fontFamily:iconfont;color:red;">删除</text>
						<text v-else>{{ite}}</text>
					</div>
				</div>
			</div>
		</wxc-popup>
		
	</div>
</template>
<style>
.placeholder {
  color: #999999;
  font-size: 30px;
  margin-left: 50px;
}
.title {
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	padding-right: 14px;
	padding-left:14px;
	padding-bottom:20px;
}
.btn {
  height: 70px;
  /* flex: 1; */
  align-items: center;
  justify-content: center;
}
.btn2 {
  height: 70px;
  flex: 4;
  align-items: center;
  justify-content: center;
}
.content {
  padding-top: 10px;
  padding-left: 10px;
}
.row {
  flex-direction: row;
}
.button {
  height: 75px;
  /* border-width: 1px; */
  flex: 1;
  justify-content: center;
  align-items: center;
  /* margin-right: 10px; */
  /* margin-bottom: 10px; */
  padding-top: 10px;
  padding-bottom: 10px;
}
.image {
  width: 48px;
  height: 32px;
}
.imagearea {
  width: 48px;
  height: 32px;
  position: absolute;
  top: 9px;
  right: 0;
}
</style>
  
<script>
import commonUtil from "../../js/keyboard/commonUtil.js";
import { WxcPopup } from "weex-ui";
var domModule = weex.requireModule("dom");
const modal = weex.requireModule("modal");
export default {
  props: {
    closeState: {
      type: Boolean,
      default: true
    },
    inputstyle: Object,
    textstyle: Object,
    type: {
      type: Boolean,
      default: true
	},

	closeTitle:{
		type: String,
		default:''
	},

    placeholder: {
      type: String,
      default: "请输入密码"
    },
    isBottomShow: {
      type: Boolean,
      default: false
    }
  },
  components: { WxcPopup },
  data: function() {
    return {
      input: "",
      passwordInput: "",
      char: [
        "q",
        "w",
        "e",
        "r",
        "t",
        "y",
        "u",
        "i",
        "o",
        "p",
        "a",
        "s",
        "d",
        "f",
        "g",
        "h",
        "j",
        "k",
        "l",
        "z",
        "x",
        "c",
        "v",
        "b",
        "n",
        "m"
      ],
      charInit: [],
      symbolList: [
        ["&", '"', ";", "^", ",", "|", "$", "*", ":", "'"],
        ["?", "{", "[", "~", "#", "}", ".", "]", "\\", "!"],
        ["(", "%", "-", "_", "+", "/", ")", "=", "<", "`"],
        [">", "@", "blank", "del"]
      ],
      num: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
      numInit: [],
      charRandom: "0",
      numRandom: "0",
      state: "num",
      charState: "lower",
      // isBottomShow:false,
      popupHeight: "490",
      cursor: "",
      interval: "",
      blank: true,
      imageUrl: ""
    };
  },
  created: function() {
    var self = this;
    self.charInit = commonUtil.copy(self.char, "deep");
    self.numInit = commonUtil.copy(self.num, "deep");
  },
  methods: {
    popupMenu() {
      this.$emit("closePop", false);
		if (this.input.length !== 6) {
			let tipCont = this.closeTitle || '请输入6位数字密码' 
			modal.toast({ message: tipCont });
		}
      this.input = "";
      this.passwordInput = "";
    },
    randomArr(arr, name, init) {
      var self = this;
      if (Array.isArray(arr)) {
        if (self[name] == "0") {
          self[name] = "1";
          return arr.sort(function() {
            return 0.5 - Math.random();
          });
        } else {
          self[name] = "0";
          self.charState = "lower";
          return commonUtil.copy(self[init], "deep");
        }
      } else {
        return arr;
      }
    },
    btnClick(ite) {
      if (ite == "blank") {
        this.input += " ";
        this.passwordInput += "*";
        if (this.passwordInput.length > 6) {
          this.input = this.input.slice(0, 6);
        }
      } else if (ite == "del") {
        this.input = this.input.slice(0, this.input.length - 1);
        this.passwordInput = this.passwordInput.slice(
          0,
          this.passwordInput.length - 1
        );
      } else {
        this.input += ite;
        this.passwordInput += "*";
        if (this.passwordInput.length === 6) {
          this.input = this.input.slice(0, 6);
          this.$emit("inputVal", { inputVal: this.input });

          !!this.closeState && this.$emit("closePop", false);

          this.input = "";
          this.passwordInput = "";
        }
      }
    }
  },
  computed: {
    charList() {
      var self = this;
      var arr = [];
      arr[0] = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
      arr[1] = self.char.slice(0, 10);
      arr[2] = ["top"].concat(self.char.slice(10, 19));
      arr[3] = ["blank"].concat(self.char.slice(19, 26)).concat(["del"]);
      return arr;
    },
    numList() {
      var self = this;
      var arr = [];
      arr[0] = self.num.slice(0, 3);
      arr[1] = self.num.slice(3, 6);
      arr[2] = self.num.slice(6, 9);
      arr[3] = ["."].concat(self.num.slice(9, 10)).concat(["del"]);
      return arr;
    },
    mrTextstyle() {
      const { textstyle } = this;
      const mrBtnStyle = {
        ...textstyle,
        color: "blue"
      };
      return mrBtnStyle;
    }
  }
};
</script>